此次我們鐵人賽將使用 VS code 作為環境，那今天就來簡單介紹一下這套好用的工具吧

Download

首先呢！當然就是下載拉， Download 這邊直接給他點進去

網頁進來後，印入眼簾的就是以下這個畫面

此畫面是可以讓使用者們依照自己電腦的作業系統需求去下載所需要的開發環境
選擇好作業系統後直接點下去就會開始下載囉！　

首先，我們將會看到以下畫面，請勾選「我同意」後點選「下一步」。

接著可以依照自己的喜好選擇要不要建立桌面的捷徑，選擇完成後點選「下一步」。

最後呢，檢查看看是否都滿足需求了，確認後點選「安裝」，即可完成喔！

那安裝完成後我們就可以直接開啟我們的 VS Code 了！
下載成功後，我們就需要一些好用的套件來輔助我們寫 Code
接下來就來看看我們較常使用的套件吧！

那今天的最後，想再補充給大家 7 個我在 VS Code 中常用的網頁簡打

div + div

如果想打出多個 div 框架，可以在 body 中輸入 div+div ，如下圖所示

按下 Enter 後，就會有完整的 div 框架出來啦！也不限定於只能 2 個，想要多少個都可以

div > p

接下來要介紹的是可以在 div 框架中包一個或許多個段落標籤

再來我們一樣按下 Enter 後，成果就出來啦，是不是非常實用呢

div + (div>p) + div

來來來！接下來這個是可以結合剛剛的兩款簡打
不僅能在 div 框架中包一個或許多個段落標籤，還能接續使用更多的 div

登楞 ~ 一個 Enter 下去，就出來啦

div > div ^ p

那那那，如果以上都不是你想要的簡打，想要的是一款可以 div 包 div ，還可以再加上段落標籤，就可以使用我們這個啦 ~

叮咚！又出來了

.class

大家都知道在寫 CSS 時，是 . + Class 的變數，在裡面寫你要調整的 code 就可以了
那在 body 裡也是一樣的用法喔，只是他更精簡了，直接 . + class 後
就可以幫你在 div 框架中，幫你寫好 class 了

來！Do Re Mi

是不是非常方便呢

#id

如果想要 id 而不是 class 的話，只需要把 . 改成 # 就可以囉

ul > li { $ } * 5

最後！就是這個了，也是非常實用的表格簡打

再來不用我多說了吧，Enter 下去

表格就出來啦，是不是也非常的實用呢

那今天我們對於 VS Code 的下載與簡打的介紹就到這邊告一段落拉，謝謝大家的觀看
明天我將會介紹前端的套件給大家作為參考，謝謝各位!